<template>
  <Dialog v-model="dialogVisible" title="成绩汇总详情" width="1000px">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="汇总名称">
        {{ summaryData.summaryName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="汇总时间">
        {{ summaryData.summaryTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="评价计划">
        {{ summaryData.planName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="统计范围">
        {{ getScopeTypeName(summaryData.scopeType) }}
      </el-descriptions-item>
      <el-descriptions-item label="参与人数">
        {{ summaryData.totalCount || 0 }}人
      </el-descriptions-item>
      <el-descriptions-item label="通过人数">
        {{ summaryData.passedCount || 0 }}人
      </el-descriptions-item>
      <el-descriptions-item label="通过率">
        {{ getPassRate() }}%
      </el-descriptions-item>
      <el-descriptions-item label="平均分">
        {{ summaryData.averageScore || 0 }}分
      </el-descriptions-item>
    </el-descriptions>
    
    <!-- 成绩统计表 -->
    <el-divider content-position="left">成绩统计</el-divider>
    <el-table :data="summaryData.scoreStats || []" border style="width: 100%">
      <el-table-column prop="scoreSeg" label="分数段" width="120" />
      <el-table-column prop="count" label="人数" width="80" />
      <el-table-column prop="percentage" label="占比" width="80">
        <template #default="{ row }">{{ row.percentage }}%</template>
      </el-table-column>
      <el-table-column prop="cumulative" label="累计人数" width="100" />
      <el-table-column prop="cumulativePercentage" label="累计占比" width="100">
        <template #default="{ row }">{{ row.cumulativePercentage }}%</template>
      </el-table-column>
    </el-table>
    
    <!-- 职业统计 -->
    <el-divider content-position="left" v-if="summaryData.professionStats && summaryData.professionStats.length > 0">
      职业统计
    </el-divider>
    <el-table :data="summaryData.professionStats || []" border style="width: 100%" v-if="summaryData.professionStats && summaryData.professionStats.length > 0">
      <el-table-column prop="professionName" label="职业名称" />
      <el-table-column prop="totalCount" label="总人数" width="100" />
      <el-table-column prop="passedCount" label="通过人数" width="100" />
      <el-table-column prop="passRate" label="通过率" width="100">
        <template #default="{ row }">{{ row.passRate }}%</template>
      </el-table-column>
      <el-table-column prop="averageScore" label="平均分" width="100" />
      <el-table-column prop="maxScore" label="最高分" width="100" />
      <el-table-column prop="minScore" label="最低分" width="100" />
    </el-table>
    
    <!-- 等级统计 -->
    <el-divider content-position="left" v-if="summaryData.levelStats && summaryData.levelStats.length > 0">
      等级统计
    </el-divider>
    <el-table :data="summaryData.levelStats || []" border style="width: 100%" v-if="summaryData.levelStats && summaryData.levelStats.length > 0">
      <el-table-column prop="skillLevel" label="技能等级" width="120">
        <template #default="{ row }">
          <el-tag>{{ getLevelName(row.skillLevel) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="totalCount" label="总人数" width="100" />
      <el-table-column prop="passedCount" label="通过人数" width="100" />
      <el-table-column prop="passRate" label="通过率" width="100">
        <template #default="{ row }">{{ row.passRate }}%</template>
      </el-table-column>
      <el-table-column prop="averageScore" label="平均分" width="100" />
      <el-table-column prop="theoryAverage" label="理论平均分" width="120" />
      <el-table-column prop="practiceAverage" label="实操平均分" width="120" />
    </el-table>
    
    <!-- 汇总说明 -->
    <el-divider content-position="left" v-if="summaryData.summaryDesc">汇总说明</el-divider>
    <div style="background: #f5f5f5; padding: 15px; border-radius: 4px;" v-if="summaryData.summaryDesc">
      <div style="white-space: pre-wrap;">
        {{ summaryData.summaryDesc }}
      </div>
    </div>
    
    <template #footer>
      <el-button @click="exportSummary">导出汇总</el-button>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dialogVisible = ref(false)
const summaryData = ref({} as any)

const getScopeTypeName = (type: number) => {
  const typeMap = { 1: '全部', 2: '按职业', 3: '按等级', 4: '按时间' }
  return typeMap[type] || '-'
}

const getLevelName = (level: number) => {
  const levelMap = { 1: '初级', 2: '中级', 3: '高级', 4: '技师', 5: '高级技师' }
  return levelMap[level] || '-'
}

const getPassRate = () => {
  const total = summaryData.value.totalCount || 0
  const passed = summaryData.value.passedCount || 0
  return total > 0 ? ((passed / total) * 100).toFixed(1) : '0'
}

const exportSummary = () => {
  // TODO: 实现汇总导出功能
  console.log('导出汇总')
}

const open = (data: any) => {
  dialogVisible.value = true
  summaryData.value = data
}

defineExpose({ open })
</script> 